import React, { useState }from 'react';
import { Typography } from 'antd';
import { CalculatorOutlined } from '@ant-design/icons';
import TopMenu from '../../../components/layout/TopMenu';
import AerialCrossingPage from './aerialcrossing/AerialCrossingPage';


const { Title } = Typography;

const CrossingCalculationPage: React.FC = () => {
  const [currentMenuKey, setCurrentMenuKey] = useState('aerialcrossing');

  // 顶部菜单配置
  const topMenuItems = [
    {
      key: 'aerialcrossing',
      label: '跨越',
    },
    {
      key: 'crossing',
      label: '穿越',
    },
    {
      key: 'statistics',
      label: '统计',
    },
  ];

  const handleMenuClick = (key: string) => {
    setCurrentMenuKey(key);
  };


  return (
    <div>
      <Title level={2}>
        <CalculatorOutlined /> 穿跨越工程计算
      </Title>
      
      <div style={{ marginBottom: '24px', overflow: 'hidden' }}>
        <TopMenu 
          currentKey={currentMenuKey}
          onChange={handleMenuClick}
          items={topMenuItems}
        />
      </div>

      {currentMenuKey === 'aerialcrossing' && (
        <AerialCrossingPage />
      )}

      {(currentMenuKey === 'crossing' || currentMenuKey === 'statistics') && (
        <div style={{ padding: '40px', textAlign: 'center', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
          <Typography.Title level={4}>功能开发中</Typography.Title>
          <Typography.Text type="secondary">
            该功能正在开发中，敬请期待...
          </Typography.Text>
        </div>
      )}

    </div>
  );
};

export default CrossingCalculationPage;